<template>
	<view>
		<!-- 导航栏 -->
		<scroll-view scroll-x class="nav text-center" :class="'bg-'+basic.color">
			<view class="cu-item" :class="programState.pan_opening==='1'?'text-green cur':''" @tap="tabSelect('1')">模拟交易</view>
			<view class="cu-item" :class="programState.pan_opening==='0'?'text-green cur':''" @tap="tabSelect('0')">实盘交易</view>
		</scroll-view>
		
		<!-- 内容区 -->
		<!-- 模拟交易(启动按钮) -->
		<view v-if="programState.pan_opening==='1' && programState.status === '-1'">
			<view class="padding-xs flex align-center">
				<view class="flex-sub text-center">
					<view class="padding">
						-- 模拟交易描述 --
						<view v-for="(item,index) in moniNote" :key="index">{{ item }}</view>
					</view>
					
					<view class="text-xsl padding" style="margin-top: 20%;">
						<text class="cuIcon-playfill" :class="'text-'+basic.color" @click="showDialog('1')"></text>
					</view>
					<view class="padding" style="font-size: 14px">点击上方图标【启动程序】</view>
				</view>
			</view>
		</view>
		<!-- 实盘交易(启动按钮) -->
		<view v-else-if="programState.pan_opening==='0' && programState.status === '-1'">
			<view class="padding-xs flex align-center">
				<view class="flex-sub text-center">
					<view class="padding">
						-- 实盘交易描述 --
						<view v-for="(item,index) in shipanNote" :key="index">{{ item }}</view>
					</view>
					
					<view class="text-xsl padding" style="margin-top: 20%;">
						<text class="cuIcon-playfill" :class="'text-'+basic.color" @click="showDialog('1')"></text>
					</view>
					<view class="padding" style="font-size: 14px">点击上方图标【启动程序】</view>
				</view>
			</view>
		</view>
		
		<!-- 停止按钮 -->
		<view v-if="programState.status === '1' || programState.status === '0'">
			<view class="padding-xs flex align-center">
				<view class="flex-sub text-center">
					<!-- 模拟交易 -->
					<view v-if="programState.pan_opening==='1'" class="padding">
						-- 模拟交易描述 --
						<view v-for="(item,index) in moniNote" :key="index">{{ item }}</view>
					</view>
					<!-- 实盘交易 -->
					<view v-else-if="programState.pan_opening==='0'" class="padding">
						-- 实盘交易描述 --
						<view v-for="(item,index) in shipanNote" :key="index">{{ item }}</view>
					</view>
					
					<view class="text-xsl padding">
						<text class="cuIcon-stop text-red" @click="showDialog('-1')"></text>
					</view>
					<view class="padding">
						【立即停止】
						<view>需手动平掉所有币种仓位.</view>
					</view>
					
					<view class="myXian"></view>
					
					<view class="text-xsl padding">
						<text v-if="programState.status === '0'" class="cuIcon-stop text-red" @click="pingCangStopStatus()"></text>
						<text v-else class="cuIcon-playfill text-red" @click="showDialog('0')"></text>
					</view>
					<view class="padding">
						【平仓停止】
						<view>程序继续运行, 只平仓不开仓.</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<!-- 弹出启动/停止确认框 -->
		<view class="cu-modal" :class="dialog?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">启动提示</view>
					<view class="action" @tap="closeDialog">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view v-if="copyProgramState.status === '1'">
						<view v-if="copyProgramState.pan_opening === '1'">确定【启动】模拟盘？</view>
						<view v-if="copyProgramState.pan_opening === '0'">确定【启动】实盘？</view>
					</view>
					<view v-else-if="copyProgramState.status === '0'">
						<view v-if="copyProgramState.pan_opening === '1'">
							确定【平仓停止】模拟盘？
						</view>
						<view v-if="copyProgramState.pan_opening === '0'">
							确定【平仓停止】实盘？
						</view>
						<view>程序会执行只平仓不开仓操作, 直到空仓后自动停止程序.</view>
					</view>
					<view v-else-if="copyProgramState.status === '-1'">
						<view v-if="copyProgramState.pan_opening === '1'">
							确定【立即停止】模拟盘？
						</view>
						<view v-if="copyProgramState.pan_opening === '0'">
							确定【立即停止】实盘？
						</view>
						<view>会遗留仓位, 下次启动时只能手动全部平仓后再启动.</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn" :class="'text-'+basic.color + ' lines-'+basic.color " @click="closeDialog">取消</button>
						<button class="cu-btn margin-left" :class="'bg-'+basic.color" @click="clickSubmit">确定</button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { operation } from '@/api/basic/basic.js'
	export default {
		props: {
			basic: {},
			vprogramstate: {}
		},
		data() {
			return {
				dialog: false,	// 弹出确认框
				moniNote:[
					'1、没有爆仓机制操作.',
					'2、使用自建余额账户.'
				],
				shipanNote:[
					'账户余额有差异(以交易所账户为准).'
				],
				programState: {
					pan_opening: '1',	// 盘口类型  ('0', '实盘'), ('1', '模拟盘'),
					status: '-1'	// 程序状态 ('-1', '停止'), ('1', '运行中'), ('0', '平仓停止'),
				},
				copyProgramState: {
					pan_opening: '1',	// 盘口类型  ('0', '实盘'), ('1', '模拟盘'),
					status: '-1'	// 程序状态 ('-1', '停止'), ('1', '运行中'), ('0', '平仓停止'),
				}
			}
		},
		watch: {
			vprogramstate: {
				immediate: true,
				handler (val) {
					this.programState = val
				}
			}
		},
		mounted() {
			uni.showLoading({
				title: '加载中...',
			})
			console.log('操作', this.programState)
			setTimeout(function () {
				uni.hideLoading();
			}, 1000);
		},
		methods: {
			// 导航栏切换
			tabSelect(panId) {
				if (this.programState.status !== '-1') {
					uni.showToast({ icon:'none', title: ' 完全停止后再切换' })
				} else {
					this.programState.pan_opening = panId
					console.log('交易类型', this.programState)
				}
			},
			// 弹出启动/停止确认框
			showDialog(res) {
				this.dialog = true
				this.copyProgramState.pan_opening = this.programState.pan_opening
				this.copyProgramState.status = res
			},
			closeDialog(){
				this.dialog = false
			},
			// 弹出框的确认操作
			clickSubmit() {
				uni.showLoading({ title: '加载中...' })
				
				var _this = this
				
				const submit_data = Object.assign({}, _this.copyProgramState, _this.basic)		// 多个对象合并
				
				console.log('（预留接口位置）接口参数', _this.basic)
				console.log('（预留接口位置）这里是确认启动/停止', _this.programState)
				
				uni.getStorage({
					key:_this.basic.exchange_domain + _this.basic.strategy_name,
					success(resVisit) {
						operation(resVisit.data.ip_address, resVisit.data.access, submit_data).then(res => {
							console.log('操作页回调', res)
							_this.dialog = false
							
							if (res.code === 200) {
								console.log('弹出框的确认操作回调 - 200状态码', res)
								_this.programState = _this.copyProgramState
								_this.$emit("setProgramState", {
									pan_opening: res.data.pan_opening,
									status: res.data.status,
									process: res.data.process
								})
							} else {
								console.log('弹出框的确认操作回调 - 其它状态码', res)
								uni.showToast({ icon:'none', title: res.msg })
							}
							setTimeout(function () { uni.hideLoading() }, 1000);
							
						}).catch(err => {
							setTimeout(function () { uni.hideLoading() }, 1000);
							uni.showToast({ icon:'none', title: `operation接口请求失败: ${err.errMsg}` })
						})
						
					},fail(errVisit) {
						setTimeout(function () { uni.hideLoading() }, 1000);
						uni.showToast({ icon:'none', title: `token获取失败: ${errVisit.errMsg}` })
					}
				})
				
				
			},
			// 已经是平仓停止的状态提示
			pingCangStopStatus() {
				uni.showToast({ icon:'none', title: '平仓停止已启用' })
				console.log('平仓停止状态', this.programState)
			}
		}
	}
</script>

<style>

</style>
